<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>props的验证</h2>
      <child
        name="pengshao"
        age="30"
        sex="男"
        height="150"
        :money="25000"
        phone="13345678910"
      ></child>
    </div>

    <script src="../Vue.js"></script>
    <script>
      const Child = {
        props: {
          name: String,
          // age: Number,
          // 数组的语法表示多种类型
          age: [String, Number],
          // sex: String
          // required: true表示这个属性是必填的
          sex: {
            type: String,
            required: true,
          },
          // default: 180表示props的属性的默认值
          height: {
            type: [String, Number],
            default: 180,
          },
          // validator是用来做自定义的验证函数
          // validator是需要返回一个true，或者false
          money: {
            type: Number,
            validator(val) {
              // if (val > 20000) {
              //   return true;
              // } else {
              //   return false;
              // }
              return val > 20000;
            },
          },

          // phone: {
          //   type: String,
          //   validator(val) {
          //     const reg = /^1[34578][0-9]{9}$/;
          //     return reg.test(val);
          //   },
          // },
        },
        template: `
          <div>child组件 - {{ name }} - {{ age }} - {{ sex }} - {{ height }} - {{ money }}</div>
        `,
      };
      new Vue({
        el: "#app",
        data: {},
        components: {
          Child,
        },
      });
    </script>
  </body>
</html>
